<template>
  <div>
    <el-drawer custom-class="wxkj-drawer content-management-edit-drawer" :title="drawerTitle" :visible.sync="drawerShow" size="500px">
      <div class="drawer-content">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">

          <el-form-item v-show="false" label="id：" prop="id">
            <el-input v-model="form.id" />
          </el-form-item>
          <el-form-item label="菜单类型：" required prop="menuType">

            <template>
              <el-radio-group v-model="form.menuType">
                <el-radio :label="0">一级菜单</el-radio>
                <el-radio :label="1">子菜单</el-radio>
                <!--                          <el-radio :label="2">按钮</el-radio>-->
              </el-radio-group>
            </template>

          </el-form-item>

          <el-form-item v-show="1==form.menuType||2==form.menuType" label="父级：">
            <el-select ref="menu_select" v-model="parentIdLabel" clearable placeholder="请选择" collapse-tags style="width:100%">
              <el-option :value="form.parentId" style="height: auto">
                <el-tree ref="tree" :data="menuTree" highlight-current :props="defaultProps" @node-click="handleNodeClick" />
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="菜单名称：" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="菜单路径：" prop="url">
            <el-input v-model="form.url" />
          </el-form-item>

          <el-form-item label="菜单图标：">
            <el-col :span="18">
              <el-input v-model="form.icon" placeholder="请选择图标" />
            </el-col>
            <el-col :span="6" class="pl10">
              <el-button style="width: 100%" @click="selectIcon">选择</el-button>
            </el-col>
          </el-form-item>
          <el-form-item label="组件路径：" prop="component">
            <el-input v-model="form.component" />
          </el-form-item>

          <el-form-item v-show="form.menuType==0" label="默认跳转地址：">
            <el-input v-model="form.redirect" />
          </el-form-item>

          <!-- <el-form-item label="是否顶级菜单：" prop="route">
            <el-switch
              v-model="form.route"
              active-text=""
              inactive-text=""
            />
          </el-form-item> -->
          <el-form-item label="隐藏路由：" prop="hidden">
            <el-switch
              v-model="form.hidden"
              active-text=""
              inactive-text=""
            />
          </el-form-item>
          <!--                  <el-form-item label="聚合路由：" prop="isLeaf">-->
          <!--                    <el-switch-->
          <!--                      v-model="form.isLeaf"-->
          <!--                      active-text=""-->
          <!--                      inactive-text="">-->
          <!--                    </el-switch>-->
          <!--                  </el-form-item>-->

          <el-form-item label="是否缓存路由：" prop="keepAlive">
            <el-switch
              v-model="form.keepAlive"
              active-text=""
              inactive-text=""
            />
          </el-form-item>
          <el-form-item label="打开方式：" prop="internalOrExternal">
            <el-switch
              v-model="form.internalOrExternal"
              active-text="外部"
              inactive-text="内部"
            />
          </el-form-item>

          <el-form-item label="菜单排序：" prop="sortNo">
            <el-input-number v-model="form.sortNo" :min="0" :max="100" label="" style="width: 140px;" />
          </el-form-item>
          <div class="drawer-form-buttom-group">
            <el-button type="primary" @click.native="submit()">保存</el-button>

            <el-button @click="drawerClose">取消</el-button>
          </div>
        </el-form>
      </div>
    </el-drawer>
    <icon ref="icon" @icon="selectedIcon" />
  </div>
</template>

<script>
// import tinymceEditor from "@/components/Tinymce";
// import uploadCropper from "@/components/uploadCropper";
import { menu_add, menu_edit, menu_list } from '@/api/sys_menu'
import icon from '@/components/IconDialog'

export default {
  components: { icon },

  data() {
    // var validateUploadImg = (rule, value, callback) => {
    //     if (value === "") {
    //         this.$refs.uploadCropper.uploadError(true);
    //         callback(new Error("请上传图片"));
    //     }
    //     callback();
    // };

    return {
      parentIdLabel: '',
      menuTree: [],
      // data: [
      //   {
      //     id: 1,
      //     label: "一级 1",
      //     children: [
      //       {
      //         id: 4,
      //         label: "二级 1-1"
      //       }
      //     ]
      //   },
      //   {
      //     id: 2,
      //     label: "一级 2",
      //     children: [
      //       {
      //         id: 5,
      //         label: "二级 2-1"
      //       },
      //       {
      //         id: 6,
      //         label: "二级 2-2"
      //       }
      //     ]
      //   },
      //   {
      //     id: 3,
      //     label: "一级 3",
      //     children: [
      //       {
      //         id: 7,
      //         label: "二级 3-1"
      //       },
      //       {
      //         id: 8,
      //         label: "二级 3-2"
      //       }
      //     ]
      //   }
      // ] ,

      defaultProps: {
        children: 'children',
        label: 'name'
      },

      drawerShow: false,
      drawerTitle: '',
      thumb_dictText: '', // 展示缩略图使用
      form: {
        alwaysShow: true, // 是否路由菜单
        children: null,
        component: '',
        redirect: '',
        // component: "dashboard/Analysis",
        // createBy: null,
        // createTime: "2018-12-25 20:34:38",
        delFlag: 0,
        description: null,
        hidden: false, // 隐藏路由
        icon: '',
        id: '',
        internalOrExternal: false, // 打开方式 false-内部
        isLeaf: true, // 是否聚合路由
        //  leaf: false,
        keepAlive: true, // 是否缓存路由
        key: '',

        menuType: 0, // 0一级  1-子菜单  2-按钮
        name: '',
        parentId: '',
        perms: null,
        permsType: null,
        route: true, // 是否路由菜单
        sortNo: 0,
        status: null,
        title: '',
        // updateBy: "admin"
        // updateTime: "2020-02-26 18:40:35"
        url: ''
      },
      //  imageUrl: '',
      rules: {
        // name: [{
        //   required: true,
        //   message: '请填写菜单名称',
        //   trigger: 'blur'
        // },
        // {
        //   min: 2,
        //   max: 100,
        //   message: '长度在 1 到 100 个字符',
        //   trigger: 'blur'
        // }
        // ],
        // url: [{
        //   required: true,
        //   message: '请填写菜单路径',
        //   trigger: 'blur'
        // }]

      }
    }
  },
  watch: {
    drawerShow(bl) {
      if (!bl) {
        // this.thumb_dictText = "";
        // this.form.content = "";
        this.$refs.form.resetFields()
        // this.$refs.editor.setContent("");
        // this.$refs.uploadCropper.initUpload();
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    selectIcon() {
      console.log(1111)
      this.$refs.icon.show()
    },
    selectedIcon(icon) {
      this.form.icon = icon
    },
    handleNodeClick(data) { // 下拉树 https://blog.csdn.net/weixin_45140661/article/details/90898558
      // console.log("tree:=================>"+data);
      //  console.log("tree:=================>"+data.id,data.name);

      this.$refs.menu_select.blur()

      this.form.parentId = data.id
      this.parentIdLabel = data.name
    },
    // 关闭弹窗
    drawerClose() {
      this.drawerShow = false
      this.$emit('refresh')
    },
    // 弹窗打开
    show(title, rowData) {
      // this.topBlockId=topBlockId;
      this.drawerTitle = title
      this.drawerShow = true
      // console.log(rowData);
      if (rowData != null) {
        // 编辑传参
        try {
          if (rowData) {
            Object.keys(rowData).forEach(k => {
              this.form[k] = rowData[k]
              // console.log(k,this.form[k]);
            })
          }
        } catch (e) {
          // TODO handle the exception
        }
      } else { // 新增
        // this.form.id="";
        // this.form.roleCode="";
        // this.form.roleName="";
        this.form = {
          alwaysShow: false,
          children: null,
          component: '',
          redirect: '',
          // createBy: null,
          // createTime: "2018-12-25 20:34:38",
          delFlag: 0,
          description: null,
          hidden: false,
          icon: '',
          id: '',
          internalOrExternal: false,
          isLeaf: true,
          keepAlive: true,
          key: '',
          leaf: true,
          menuType: 0, // 0一级  1-子菜单  2-按钮
          name: '',
          parentId: null,
          perms: null,
          permsType: null,
          route: true,
          sortNo: 0,
          status: null,
          title: '',
          // updateBy: "admin"
          // updateTime: "2020-02-26 18:40:35"
          url: ''
        }
      }

      menu_list({}).then(response => {
        const list = response.result
        const menuTree = []
        // console.log("form "+this.form.parentId)
        for (let i = 0; i < list.length; i++) {
          const element = list[i]
          if (element.id == this.form.parentId) {
            // console.log("相同"+element.name);
            this.parentIdLabel = element.name
          }
          if (element.id != this.form.id) { // 排除自己
            menuTree.push(element)
          }
          // console.log(element);
        }

        this.menuTree = menuTree
      })
    }, // end of show

    // 保存
    submit() {
      console.log(this.form)
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.parentId == this.form.id) {
            this.$message({
              type: 'warn',
              message: '不能选择自己作为父节点!'
            })
            return
          }
          if (this.form.id) {
            // 编辑
            menu_edit(this.form).then((response) => {
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              this.drawerShow = false
              this.$emit('refresh')
            })
          } else {
            console.log(this.form)
            menu_add(this.form).then((response) => {
              this.$message({
                type: 'success',
                message: '添加成功！'
              })
              this.drawerShow = false
              this.$emit('refresh')
            })
          }
        }
      })
    }

  }
}
</script>
<style lang="scss">
    .content-management-edit-drawer {
        .drawer-content {
            padding: 20px;

            .upload-img {
                .el-upload {
                    width: 200px;
                    height: 100px;
                    line-height: 110px;
                }
            }
        }
    }
</style>
